<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>广告管理11</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>

	<link rel="stylesheet" href="../plugins/select2/select2.css" />
	<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
	<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>

	<!-- bootstrap-table -->
	<link rel="stylesheet" type="text/css" href="../plugins/bootstrap-table/dist/bootstrap-table.css"/>
	<script type="text/javascript" src="../plugins/bootstrap-table/dist/bootstrap-table.js"></script>
	<script type="text/javascript" src="../plugins/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>

	<link rel="stylesheet" href="../plugins/bootstrap-fileinput/css/fileinput.css">
	<script src="../plugins/bootstrap-fileinput/js/fileinput.js"></script>
	<script src="../plugins/bootstrap-fileinput/js/locales/zh.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
	<h3 class="box-title">广告管理</h3>
</div>

<div class="box-body">

	<!-- 数据表格 -->
	<div class="table-box">

		<!--工具栏-->
		<div class="pull-left">
			<div class="form-group form-inline">
				<div class="btn-group">
					<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
					<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
					<button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i class="fa fa-check"></i> 开启</button>
					<button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i class="fa fa-ban"></i> 屏蔽</button>
					<button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
				</div>
			</div>
		</div>
		<div class="box-tools pull-right">
			<div class="has-feedback">

			</div>
		</div>
		<!--工具栏/-->

		<!--数据列表-->
		<table id="dataList" class="table table-bordered table-striped table-hover dataTable">

		</table>
		<!--数据列表/-->
	</div>
	<!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 编辑窗口 -->
<form id="addContent">
	<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" >
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
					<h3 id="myModalLabel">广告编辑</h3>
				</div>
				<div class="modal-body">

					<table class="table table-bordered table-striped"  width="800px">
						<tr>
							<td>广告分类</td>
							<td>
								<select class="form-control" name="categoryId">
									<option th:each="cat:${category}" th:value="${cat.id}">[[${cat.name}]]</option>
								</select>
							</td>
						</tr>
						<tr>
							<td>标题</td>
							<td><input  class="form-control" name="title" placeholder="标题" >  </td>
						</tr>
						<tr>
							<td>URL</td>
							<td><input  class="form-control" name="url" placeholder="URL" >  </td>
						</tr>
						<tr>
							<td>排序</td>
							<td><input  class="form-control" name="sortOrder" placeholder="排序" >  </td>
						</tr>
						<tr>
							<td>广告图片</td>
							<td>
								<table>
									<input type="hidden" name="pic">
									<tr>
										<td>
											<input type="file" id="fileId" name="myFile" />
										</td>
										<td>
											<!--<img  src="{{entity.pic}}" width="200px" height="100px">-->
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>是否有效</td>
							<td>
								<input type="checkbox" class="icheckbox_square-blue" value="2" name="status">无效
								<input type="checkbox" class="icheckbox_square-blue" value="1" name="status">有效
							</td>
						</tr>
					</table>

				</div>
				<div class="modal-footer">
					<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="addContent()">保存</button>
					<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
				</div>
			</div>
		</div>
	</div>
</form>

<!-- 修改 -->

<!-- 编辑窗口 -->
<div class="modal fade" id="UpdateEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog" >
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h3 id="myModalLabels">广告编辑</h3>
			</div>
			<div class="modal-body">
				<input type="hidden" id="cid">
				<table class="table table-bordered table-striped"  width="800px">
					<tr>
						<td>广告分类</td>
						<td>
							<select class="form-control" id="categoryId2" name="categoryId2">
								<option th:each="cat:${category}" th:value="${cat.id}">[[${cat.name}]]</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>标题</td>
						<td><input  class="form-control" id="title" placeholder="标题" >  </td>
					</tr>
					<tr>
						<td>URL</td>
						<td><input  class="form-control" placeholder="URL" id="url">  </td>
					</tr>
					<tr>
						<td>排序</td>
						<td><input  class="form-control" placeholder="排序" id="sortOrder">  </td>
					</tr>
					<tr>
						<td>广告图片</td>
						<td>
							<input type="hidden" name="pic" id="pidUrl">
							<table>
								<tr>
									<td>
										<input type="file" name="myFile" id="file"/>
									</td>
									<td>
										<!--									<img src="" width="200px" height="100px">-->
									</td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>是否有效</td>
						<td>
							<input type="checkbox" class="icheckbox_square-blue" name="status1">有效
							<input type="checkbox" class="icheckbox_square-blue" name="status2">无效
						</td>
					</tr>
				</table>

			</div>
			<div class="modal-footer">
				<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateContentInfo()">保存</button>
				<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>

</body>

</html>

<script>

	/* 图片回显 */
	$(function () {
		$('#file').fileinput({
			language: 'zh',
			uploadUrl: "/file/upLoadFile",
			showCaption: true,
			showUpload: true,
			showRemove: true,
			showClose: true,
			maxFileCount: 5,
			allowedFileExtensions : ['jpg','png','gif'],
			maxFileSize: 10240,
			enctype:"multipart/form-data",
			initialPreviewAsData: true,//是否初始预览图片
			initialPreviewFileType: 'image',//回显文件类型(初始预览文件类型)download
			// initialPreview: $("#pidUrl").val() ,//图片回显(初始预览图片地址)
			layoutTemplates:{
				actionDelete: ''
			},
			browseClass: 'btn btn-primary'
		});

		$("#file").on('fileuploaded',function (event,data,previewId,index){
			if (data.response!=null){
				$("[name=pic]").val(data.response.imgUrl);
			}
		})
	})

	/* 图片上传 */
	$(function () {
		$("#categoryId2").select2();
		$('#fileId').fileinput({
			language: 'zh',
			uploadUrl: "/file/upLoadFile",
			showUpload: true,
			showRemove: true,
			showClose: true,
			maxFileCount: 1,
			allowedFileExtensions: ['jpg', 'png', 'gif'],
			maxFileSize: 10240,
			enctype: "multipart/form-data",
			layoutTemplates: {
				/*actionDelete: ''*/
			},
			browseClass: 'btn btn-primary'
		});
		$("#fileId").on('fileuploaded', function (event, data, previewId, index) {
			if (data.response != null) {
				$("[name=pic]").val(data.response.imgUrl);
			}
		})
	})

	$('#dataList').bootstrapTable({
		//请求地址
		url : "/content/getContentList",
		method: 'post',//请求方式
		toolbar: '#toolbar',              //工具按钮用哪个容器
		striped: true,//是否显示行间隔色
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		// pagination: true,//是否显示分页（*）
		contentType: "application/x-www-form-urlencoded",//设置请求方式
		sortOrder: "desc",//排序方式
		// sortName:"newsId",//排序字段/**/
		sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
		// pageNumber: 1,//初始化加载第一页，默认第一页,并记录
		// pageSize: 3,//每页的记录行数（*）
		pageList: [10, 30, 50],//可供选择的每页的行数（*）
		// search: true,//是否显示表格搜索
		// strictSearch: true,//严格搜索
		showColumns: true,//是否显示所有的列（选择显示的列）
		showRefresh: true,//是否显示刷新按钮
		minimumCountColumns: 2,             //最少允许的列数
		clickToSelect: true,                //是否启用点击选中行
		uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
		showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
		// cardView: true,                    //是否显示详细视图
		detailView: true,                  //是否显示父子表
		//得到查询的参数
		queryParams : function (params) {
			//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			var temp = {
				// pageSize: params.limit,                         //每页条数
				// pageNum: (params.offset / params.limit) + 1,   //当前页数
			};
			return temp;
		},

		//列
		columns: [{
			checkbox: true,
			visible: true                  //是否显示复选框
		},{
			//实体类属性
			field: 'id',
			//表头
			title: '广告ID'
		},{
			field: 'name',
			title: '名称',
		},{
			field: 'title',
			title: '标题',
		}, {
			field: 'url',
			title: '地址',
		},{
			field: 'pic',
			title: '图片',
			formatter : function (value,row,index) {
				return "<img height='50px' alt='' width='100px' src="+ value +">"
			}
		},{
			field: 'sortOrder',
			title: '排序',
		},{
			field: 'status',
			title: '是否有效',
			formatter : function (value,row,index) {
				if (value==1){
					return "有效"
				}else if (value==2){
					return "无效"
				}
			}
		},{
			field: 'id',
			title: '操作栏',
			formatter : function (value,row,index) {
				//操作栏的格式化
				var id = value;
				var result = "";
				result += "<a className='btn bg-olive btn-xs' data-toggle='modal' onclick='updateContent("+id+")' data-target='#UpdateEditModal'>修改</a>";
				result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"deleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span></a>";
				return result;
			}
		}, ]
	});
	////////////////          点击刷新            //////////////////////////
	function table_refrese(){
		// 刷新当前table -> 请求一次
		$("#table").bootstrapTable("refresh");
	}

	function addContent() {
		// console.log($("[name=status]").val())
		// var check = $("[name=status]");

		$.ajax({
			url : "/content/insertContentInfo",
			type : "post",
			dataType : "json",
			async : true,
			data : $("#addContent").serialize(),
			success : function (result) {
				if (result.code == 10000){
					alert(result.message);
					window.location.reload();
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误,增加失败");
			}
		})
	}

	// 回显
	function updateContent(id) {
		$.ajax({
			url : "/content/updateContent?id="+id,
			type : "post",
			dataType : "json",
			async : true,
			success : function (result) {
				if (result.code == 10000){
					let content = result.result;
					$("#cid").val(content.id);
					$("#categoryId2").val(content.categoryId);
					$("#title").val(content.title);
					$("#url").val(content.url);
					$("#pidUrl").val(content.pic);
					$("#sortOrder").val(content.sortOrder);
					$("[name=status]").val(content.status)
					if (content.status=="1"){
						$("[name=status1]").prop("checked",true);
						$("[name=status2]").prop("checked",false);
					}
					if (content.status=="2"){
						$("[name=status1]").prop("checked",false);
						$("[name=status2]").prop("checked",true);
					}

				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误,回显失败");
			}
		})
	}

	// 回显
	function updateContentInfo() {
		$.ajax({
			url : "/content/updateContentInfo",
			type : "post",
			dataType : "json",
			data : {
				id:$("#cid").val(),
				categoryId:$("#categoryId2").val(),
				title:$("#title").val(),
				url: $("#url").val(),
				pic: $("#pidUrl").val(),
				sortOrder: $("#sortOrder").val(),
				status: $("[name=status]").val(),
			},
			async : true,
			success : function (result) {
				if (result.code == 10000){
					alert(result.message)
					window.location.reload();
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误,修改失败");
			}
		})
	}



	// 删除
	function deleteByIds(id) {
		$.ajax({
			url : "/content/deleteContent?id="+id,
			type : "post",
			dataType : "json",
			async : true,
			success : function (result) {
				if (result.code == 10000){
					alert(result.message)
					window.location.reload();
				}else if (result.code == 10001){
					alert(result.message)
				}
			},
			error : function (result) {
				alert("网络错误,回显失败");
			}
		})
	}
</script>